<section>
  <form #loginForm="ngForm" fuiForm labelFlex="1" inputFlex="4" (ngSubmit)="login(loginForm.value)">
    <fui-form-item label="Account">
      <fui-input name="username" placeholder="username" ngModel required [disabled]="loginFormDisabled" [readonly]="loginFormReadonly"></fui-input>
    </fui-form-item>
    <fui-form-item label="Password">
      <fui-input name="password" type="password" ngModel required [disabled]="loginFormDisabled" [readonly]="loginFormReadonly"></fui-input>
    </fui-form-item>
    <fui-form-item label="Company">
      <fui-select
        style="width:100px"
        name="company"
        ngModel
        [disabled]="loginFormDisabled"
        [readonly]="loginFormReadonly"
        required
      >
        <fui-select-option
          *ngFor="let company of companies"
          [value]="company.name"
        >
          {{company.name | fuiDefault }}
        </fui-select-option>
      </fui-select>
    </fui-form-item>
    <fui-form-item label="Birth date">
      <fui-datepicker-input
        name="birth"
        [datepicker]="picker"
        [(ngModel)]="date"
        (ngModelChange)="dateChange($event)"
        required
      ></fui-datepicker-input>
      <fui-datepicker #picker></fui-datepicker>
    </fui-form-item>
    <fui-form-item label="Subscribe">
      <fui-switch name="subscribe" ngModel [disabled]="loginFormDisabled" [readonly]="loginFormReadonly"></fui-switch>
    </fui-form-item>
    <fui-form-item>
      <fui-checkbox name="agree" ngModel fuiCompel [disabled]="loginFormDisabled" [readonly]="loginFormReadonly">Agree To Terms</fui-checkbox>
    </fui-form-item>
    <fui-form-item>
      <button fuiBtn="primary" [disabled]="loginForm.invalid">Confirm</button>
      <button fuiBtn="primary" type="button" (click)="toggleLoginFormDisable()">Toggle Disable</button>
      <button fuiBtn="primary" type="button" (click)="toggleLoginFormReadonly()">Toggle Readonly</button>
    </fui-form-item>
  </form>
</section>
